<template>

  <div class="banner">
    <!-- swiper -->
    <swiper :options="swiperOption">
      <swiper-slide class="slide1">
        <a href="javascript:" class="inner">
        <img src="../assets/img/s0.png" class="ani img s0 animated zoomInDown" >
        <img src="../assets/img/s1.png" class="ani img s1 animated bounceInLeft" >
        <img src="../assets/img/s2.png" class="ani img s2 flipInY animated" swiper-animate-duration="1s" >
        <img src="../assets/img/s3.png" class="ani img s3 fadeInUp animated" >
        <img src="../assets/img/s4.png" class="ani img s4 fadeInUp animated" >
        </a>
      </swiper-slide>
      <swiper-slide class="slide2">
        <a href="javascript:" class="inner">
        <img src="../assets/img/pigBanner_03.png"  class="ani img zh-a-1 animated bounceInDown" >
        <img src="../assets/img/pigBnnaer_1_03.png" class="ani img zh-a-2 animated zoomIn" >
        </a>
      </swiper-slide>
      <swiper-slide class="slide3">
        <div class="inner">
          <img src="../assets/img/b-1.png" class="ani img b-1  bounceInLeft animated" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-2.png" class="ani img b-2  bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-3.png" class="ani img b-3  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-s.png" class="ani img b-s-1  zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-s.png" class="ani img b-s-2  zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-s.png" class="ani img b-s-3  zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0.6s;-webkit-animation-delay:0.6s;">
          <img src="../assets/img/b-s.png" class="ani img b-s-5  zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
          <img src="../assets/img/b-s.png" class="ani img b-s-6  zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay=".5s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:.5s;-webkit-animation-delay:.5s;">
          <img src="../assets/img/b-y-1.png" class="ani img b-y-1 loop  moveRight animated" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="4s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:4s;-webkit-animation-delay:4s;">
          <img src="../assets/img/b-y-2.png" class="ani img b-y-2 loop  moveLeft animated" swiper-animate-effect="moveLeft" swiper-animate-duration="15s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;">
          <img src="../assets/img/b-y-3.png" class="ani img b-y-3 loop  moveRight animated" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;">

          <div class="targetBtn clearfix ani  zoomInUp animated" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s" swiper-animate-style-cache="visibility: hidden;" style="visibility: visible;animation-duration:1s;-webkit-animation-duration:1s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
            <a class="a1" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" target="_blank">了解更多</a>
            <a class="a2" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" style="" rel="media-gallery" target="_blank"><i></i>观看视频介绍</a>
          </div>

        </div>
      </swiper-slide>
      <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </swiper>
    <div class="index-wrap">
      <div class="index-left">
        <div class="index-left-block">
          <h2>全部产品</h2>
          <template v-for="product in productList" >
            <h3>{{product.title}}</h3>
            <ul>
              <li v-for="item in product.list">
                <a :href="item.url">{{item.name}}</a>
                <span v-if="item.hot" class="hot-tag">HOT</span>
              </li>
            </ul>
            <div  class="hr"></div>
          </template>
        </div>
        <div class="index-left-block lastest-news">
          <h2>最新消息</h2>
          <ul>
            <li v-for=" item in newList">
              <a :href="item.url" class="new-item">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="index-right">


        <div class="index-board-list">
          <div class="index-board-item"
               v-for="(item, index) in boardList"
               :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
            <div class="index-board-item-inner" >
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
              <div class="index-board-button">
                <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
  import axios from  'axios'
  // require styles
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import animate from 'animate.css';

    export default {
      components: {
        swiper,
        swiperSlide
      },
      mounted: function () {
        axios.post('api/getNewsList',{num:5})
          .then((res) => {
            this.newList = res.data
          }, (err) => {
            console.log(err)
          })
      },
      methods:{

      },
      data() {
          return{
            productList:{
                  pc:{
                    title:"PC产品",
                    list:[
                      {
                        name: '数据统计',
                        url: 'http://starcraft.com'
                      },
                      {
                        name: '数据预测',
                        url: 'http://warcraft.com'
                      },
                      {
                        name: '流量分析',
                        url: 'http://overwatch.com',
                        hot: true
                      },
                      {
                        name: '广告发布',
                        url: 'http://hearstone.com'
                      }
                    ]
                  },
                  app:{
                    title:"应用类",
                    list:[
                      {
                        name: '91助手',
                        url: 'http://weixin.com'
                      },
                      {
                        name: '产品助手',
                        url: 'http://twitter.com',
                        hot: true
                      },
                      {
                        name: '智能地图',
                        url: 'http://maps.com'
                      },
                      {
                        name: '团队语音',
                        url: 'http://phone.com'
                      }
                    ]
                  }
            },
            newList:[
              {
                name: '数据统计',
                url: 'http://starcraft.com'
              },
              {
                name: '数据预测',
                url: 'http://warcraft.com'
              },
              {
                name: '流量分析',
                url: 'http://overwatch.com',
                hot: true
              }
            ],
            boardList:[
              {
                title: '开放平台',
                description: '开放产品是一款',
                toKey: 'analysis',
                id:'car'
              },
              {
                title: '品牌营销',
                description: '品牌营销帮助你的产品更好找到定位',
                toKey: 'count',
                id:'loud'
              },
              {
                title: '使命必达',
                description: '使命必达快捷迭代永远保持',
                toKey: 'forecast',
                id:'earth'
              },
              {
                title: '永攀高峰',
                description: '帮你勇闯高峰',
                toKey: 'publish',
                id:'hill'
              }

            ],
            banner:[
              {
                title:'title',
                url:'www.baidu.com'
              }
            ],
            swiperOption: {
              slidesPerView: 1,
              spaceBetween: 30,
              loop: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              on: {
                slideChange: function () {

                },
              }
            }
          }
      }
    }


</script>

<style   scoped >
  .banner{
    width: 100%;

  }
  .index-wrap {
    width:70% ;
    margin: 0 auto;
    overflow: hidden;
  }
  .index-left {
    float: left;
    width: 300px;
    text-align: left;
  }
  .index-right {
    float: left;
    width: 900px;
  }
  .index-left-block {

    background: #fff;
    box-shadow: 0 0 1px #ddd;
  }
  .index-left-block .hr {
    margin-bottom: 20px;
  }
  .index-left-block h2 {
    background: #4fc08d;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
  }
  .index-left-block h3 {
    padding: 0 15px 5px 15px;
    font-weight: bold;
    color: #222;
  }
  .index-left-block ul {
    padding: 10px 15px;
  }
  .index-left-block li {
    padding: 5px;
  }
  .index-board-list {
    overflow: hidden;
  }
  .index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .index-board-item-inner {
    min-height: 125px;
    padding-left: 120px;
  }
  .index-board-car .index-board-item-inner{
    background: url(../assets/img/1.png) no-repeat;
  }
  .index-board-loud .index-board-item-inner{
    background: url(../assets/img/2.png) no-repeat;
  }
  .index-board-earth .index-board-item-inner{
    background: url(../assets/img/3.png) no-repeat;
  }
  .index-board-hill .index-board-item-inner{
    background: url(../assets/img/4.png) no-repeat;
  }
  .index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
  }
  .line-last {
    margin-right: 0;
  }
  .index-board-button {
    margin-top: 20px;
  }
  .lastest-news {
    min-height: 512px;
  }
  .hot-tag {
    background: #ff96d0;
    color: #fff;
  }
  .new-item {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

 .swiper-slide{
   position: relative;
    height:500px;
    margin: 2% 0 2% 0;
  }

  .inner {
    position: relative;
    display: block;
    width: 1000px;
    height: 500px;
    margin: 0 auto;
  }
  .swiper-slide .img {
    position: absolute;
  }
  .slide1 {
    background-color: #03c36b;
   }
  .slide1 .s0{
    left: 50%;
    margin-left: -154px;
    top: 100px;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
  }



  .slide1 .s1 {
    left: 50%;
    margin-left: -425.5px;
    top: 200px;
  }

  .slide1 .s2 {
    left: 50%;
    margin-left: -435px;
    top: 280px;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: .2s;
  }
  .slide1 .s3 {
    left: 0%;
    bottom: 0px;
    z-index: 5;
    height: 190px;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: .2s;
  }
  .slide1 .s4 {
    right: 0%;
    bottom: 0px;
    z-index: 5;
    height: 190px;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: .2s;
  }

.slide2 .zh-a-1{
  left: 10%;
  top: 60px;
  z-index: 9;
  -webkit-animation-duration: 2s;
  -webkit-animation-delay: .2s;
}
  .slide2 .zh-a-2 {
    left: 0;
    top: 0;
  }

  .slide3 {
    background-color: #43cfc8;
  }


  .slide3 .b-1 {
    right: 72px;
    top: 180px;
  }
  .slide3 .b-2 {
    left: 90px;
    top: 180px;
  }
  .slide3 .b-3 {
    left: 50%;
    margin-left: -381px;
    top: 330px;
  }

  .slide3 .b-s-1 {
    width: 100px;
    left: 50px;
    bottom: 0px;
  }
  .slide3 .b-s-2 {
    left: 160px;
    width: 160px;
    bottom: 0px;
  }
  .slide3 .b-s-3 {
    left: 390px;
    width: 58px;
    bottom: 0px;
  }

  .slide3 .b-s-4 {
    right: 359px;
    width: 103px;
    bottom: 0px;
  }

  .slide3 .b-s-5 {
    right: 250px;
    width: 150px;
    bottom: 0px;
  }
  .slide3 .b-s-6 {
    right: 0;
    width: 65px;
    bottom: 0px;
  }


  .loop{
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  .targetBtn {
    margin-top: 20px;
    position: absolute;
    bottom: 60px;
    left: 352px;
    z-index: 999;
  }
  .targetBtn a {
    height: 50px;
    border-radius: 50px;
    background: rgba(0,0,0,.5);
    float: left;
    line-height: 50px;
    text-align: center;
    color: #fff;
    text-decoration: none;
  }

  .targetBtn .a1 {
    width: 110px;
  }
  .targetBtn .a2 {
    width: 170px;
    margin-left: 15px;
  }


  /*自定义CSS动画*/
  .moveRight{-webkit-animation-name:moveRight;animation-name:moveRight}
  @-webkit-keyframes moveRight{0%{opacity: 0;left:0px;}
    10%{opacity: 1;}
    100%{opacity: 1;left:550px;}}
  @keyframes moveRight{0%{opacity: 0;left:0px;}
    10%{opacity: 1;}
    100%{opacity: 1;left:550px;}}


  .moveLeft{
    -webkit-animation-name:moveLeft;
    animation-name:moveLeft
  }
  @-webkit-keyframes moveLeft{
    0%{opacity:0;left:390px;}
    10%{opacity:1;}
    100%{opacity:1;left:-370px;}}
  @keyframes moveLeft{0%{opacity:0;left:390px;}
    10%{opacity:1;}
    100%{opacity:1;left:-370px;}}
  </style>
